<template>
  <div>
    <el-dialog
      :title="dialogData.editTitle"
      :before-close="handleClose"
      :visible.sync="centerDialogVisible"
      :width="dialogWidth"
      center>
      <div class="dialog-edit-form">
        <el-form :model="form" inline label-position="right" label-width="100px" ref="formRef" :rules="rules">
          <el-row>
            <el-col :span="24">
              <el-form-item label="品牌代码" prop="brandCode">
                <el-input v-model="form.brandCode" autocomplete="off" placeholder="品牌代码"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="品牌名称" prop="brandName">
                <el-input v-model="form.brandName" autocomplete="off" placeholder="品牌名称"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="dialog-edit-form-btn">
          <el-button type="primary" @click="handleConfirm" size="small">确认</el-button>
          <el-button @click="handleCancel" style="margin-left: 20px;" size="small">取消</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'BrandDialog',
  props: {
    dialogData: {
      type: Object,
      default: () => ({})
    },
    form: {
      type: Object,
      default: () => ({})
    },
    centerDialogVisible: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      param: '',
      rules: {
        brandCode: [
          { required: true, message: '请输入品牌代码', trigger: 'blur' }
        ],
        brandName: [
          { required: true, message: '请输入品牌名称', trigger: 'blur' }
        ]
      },
      dialogWidth: '450px'
    }
  },
  mounted () {
    // 根据当前窗口宽度改变弹窗的宽度
    if (document.body.clientWidth < 700) {
      this.dialogWidth = '80%'
    } else {
      this.dialogWidth = '450px'
    }
  },
  methods: {
    // 仅当用户通过点击关闭图标或遮罩关闭 Dialog 时起效
    handleClose () {
      this.resetAndEmit('close')
    },
    handleConfirm () {
      // 表单验证
      this.$refs['formRef'].validate((valid) => {
        if (valid) {
          let { id, brandName, brandCode } = this.form
          let paramsAdd = {
            brandCode, brandName
          }
          let paramsUpdate = {
            id, brandCode, brandName
          }
          let param = this.dialogData.editType === 'edit' ? paramsUpdate : paramsAdd
          // console.log(param)

          if (this.dialogData.editType === 'edit') {
            this.$apis.updateBrand(param).then(res => {
              // console.log(res)
              if (res && res.code === '200') {
                // 通过验证请求接口
                this.$notify({
                  title: '成功',
                  message: '编辑成功',
                  type: 'success'
                })
                this.resetAndEmit('confirm')
              } else {
                this.$notify.error({
                  title: '错误',
                  message: res.message
                })
              }
            }).catch(err => {
              console.log(err)
              this.$notify.error({
                title: '错误',
                message: '请求异常'
              })
            })
          } else {
            this.$apis.createBrand(param).then(res => {
              console.log(res)
              if (res && res.code === '200') {
                // 通过验证请求接口
                this.$notify({
                  title: '成功',
                  message: '新增成功',
                  type: 'success'
                })
                this.resetAndEmit('confirm')
              } else {
                this.$notify.error({
                  title: '错误',
                  message: res.message
                })
              }
            }).catch(err => {
              console.log(err)
              this.$notify.error({
                title: '错误',
                message: '保存成功'
              })
            })
          }
        } else {
          return false
        }
      })
    },
    // 取消
    handleCancel () {
      this.resetAndEmit('cancel')
    },
    // 清空表单并且传递通信父组件
    resetAndEmit (val) {
      // 清空数据在父组件中完成
      // this.$refs['formRef'].resetFields()
      // 清空表单验证
      // this.$refs['formRef'].clearValidate()
      // 传给父组件通信数据
      let obj = {
        centerDialogVisible: false,
        event: val
      }
      this.$emit('handleEvent', obj)
    }
  }
}
</script>

<style scoped>
  /* input前的label标签加粗 */
  /deep/ .el-form-item__label {
    font-size: 14px;
    color: #333;
    font-weight: 700;
  }

  /* dialog标题从居中变成靠左 */
  /deep/ .el-dialog--center {
    text-align: left
  }
</style>
